<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                $("h2").click(function () {
                    // next()取得匹配的元素集合中的一个元素紧邻的后面同辈元素的元素集合
                    if($(this).next().css("display")=="none"){
                        $("ul").css("display","none");
                        $(this).next().css("display","block");
                        return;
                    }
                    $(this).next().css("display","none");
                });
            });
        </script>
    </head>
    <body>
        <h2 >您最最喜欢的动画片</h2>
        <ul style="display: none;">
            <li>奶龙</li>
            <li>萌鸡小队</li>
            <li>小猪佩奇</li>
        </ul>
        <h2 >您最最喜欢的电影</h2>
        <ul style="display: block;" >
            <li>哪吒之魔童降世</li>
            <li>熊出没</li>
            <li>姜子牙</li>
        </ul>
        <h2 >您最最喜欢的综艺节目</h2>
        <ul style="display: none;" >
            <li>极限挑战</li>
            <li>奔跑吧</li>
            <li>向往的生活</li>
        </ul>
    </body>
</html>